<template>
    <view class="title">
        <view :class="props.icon?['title__icon','title__icon-'+props.icon]:''" :style="{height:props.fontSize/2+'rpx'}">
        </view>
        <view class="title__name" :style="{fontSize:props.fontSize+'rpx',fontWeight:props.fontWeight}">
            {{props.name}}
        </view>
    </view>
</template>
<script lang="ts" setup>
    import {
        TitleProps,
        defaultTitle
    } from '@/props.ts';
    const props = withDefaults(defineProps<TitleProps>(),
        defaultTitle
    )
    console.log(11111, props)
</script>
<style lang="scss" scoped>
    .title {
        display: flex;
        align-items: center;

        &__icon {

            padding: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            &-bar {
                border-left: 4px #8c73e8 solid;

            }
        }
    }
</style>